<!-- 菜单左边导航 -->

<template>
    <el-menu
        class="el-menu-vertical-demo"
        :default-active="nowRouter"
        background-color="transparent"
        :collapse="isCollapse"
        :router="true"
        :unique-opened="true">
        <template v-for="(item, index) in list" :key="index">
            <template v-if="item.children">
                <el-sub-menu :index="index + ''">
                    <template #title>
                        <i class="iconfont" :class="item.icon"></i>
                        <span>{{ item.name }}</span>
                    </template>
                    <el-menu-item-group v-for="(citem, cindex) in item.children" :key="cindex">
                        <el-menu-item :index="citem.path">
                            <i class="iconfont" :class="citem.icon"></i>
                            <template #title>
                                <span>{{ citem.name }}</span>
                            </template>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </template>
            <template v-else>
                <el-menu-item :index="item.path">
                    <i class="iconfont" :class="item.icon"></i>
                    <template #title>
                        <span>{{ item.name }}</span>
                    </template>
                </el-menu-item>
            </template>
        </template>
    </el-menu>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { MenuData } from '@/types/type';
import { useRouter } from 'vue-router';
let nowRouter = ref('/hindex');
// 路由信息
const router = useRouter();
nowRouter.value = router?.currentRoute?.value?.fullPath;
/*定义父组件传过来Props值的类型 start */
interface Props {
    isCollapse: boolean;
}
//接收父组件传过来的值设置默认值
withDefaults(defineProps<Props>(), {
    isCollapse: false,
});

// const isCollapse = ref(false);
const list = reactive<MenuData[]>([
    {
        name: '首页',
        icon: 'icon-home-fill',
        path: '/hindex',
    },
    {
        name: '表格管理',
        icon: 'icon-all-fill',
        children: [
            {
                name: '简单表格',
                icon: 'icon-table',
                path: '/simple',
            },
            {
                name: '复杂表格',
                icon: 'icon-table-fill',
                path: '/complex',
            },
        ],
    },
    {
        name: '图表管理',
        icon: 'icon-charts-bar',
        children: [
            {
                name: '柱形图表',
                icon: 'icon-shujucanmou',
                path: '/pillar',
            },
            {
                name: '折线表格',
                icon: 'icon-charts-line',
                path: '/brokenline',
            },
            {
                name: '其他表格',
                icon: 'icon-charts-curve',
                path: '/other',
            },
        ],
    },
    {
        name: '富文本编辑器',
        icon: 'icon-edit',
        path: '/rich',
    },
    {
        name: '地图',
        icon: 'icon-global-trade',
        path: '/map',
    },
    {
        name: '其他组件',
        icon: 'icon-layers',
        children: [
            {
                name: '生成图片',
                icon: 'icon-picture-fill',
                path: '/img',
            },
        ],
    },
    {
        name: '关于我们',
        icon: 'icon-customer-group-fill',
        path: '/about',
    },
]);
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>
